<template>
  <!--班级-->
  <div class="class">
    <!--过滤器-->
    <div class="filter-container">
      <div class="filter-item item-input">
        <el-input v-model="condition.className" placeholder="请输入班级名称"></el-input>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="searchClass"><i class="el-icon-search"></i> 搜索</el-button>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="freshClass"><i class="el-icon-refresh"></i> 刷新</el-button>
      </div>
      <div class="filter-item item-button">
        <el-tooltip content="上传学生名单以创建班级" placement="top">
          <el-button type="primary" @click="toCreateClass = true"><i class="el-icon-s-flag"></i> 创建班级</el-button>
        </el-tooltip>

      </div>
    </div>
  </div>
  <!--班级列表，分页处理-->
  <div class="class-list">
    <el-table
        :data="classTable"
        v-loading= classTableOk
        border
        style="width: 100%">
      <el-table-column
          label="序号"
          width="80"
          align="center">
        <template v-slot="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column
          prop="className"
          label="班级名称"
          width="280"
          align="center">
        <template v-slot="scope">
          <el-tooltip  effect="light" content="查看该考试班的学生" placement="top">
            <span class="col2-cell-style" @click="viewClass(scope.$index)">{{scope.row.className}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          prop="companyId"
          label="公司名称"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="creatorId"
          label="创建人"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="modifyTime"
          label="最后修改时间"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="disabled"
          label="状态"
          align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.disabled === false" type="success" disable-transitions>正常</el-tag>
          <el-tag v-if="scope.row.disabled === true" type="danger" disable-transitions>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320">
        <template v-slot="scope">
          <el-tooltip content="修改名称" placement="top">
            <el-button
                size="default"
                type="primary"
                @click="changeCurClass(scope.$index)">修改
            </el-button>
          </el-tooltip>
          <el-button
              size="default"
              type="danger"
              @click="preDelClass(scope.$index)">禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <Pagination :currentPage="pagination.currentPage" :pageSize="pagination.pageSize" :total="pagination.totalCount"
              @changePage="handlePageChange" ></Pagination>
          <!--创建班级 对话框-->
        <el-dialog title="创建班级" v-model="toCreateClass" top="1vh" width="60%">

            <!--步骤条-->
            <!--信息，班级名称，上传班级Excel-->
            <div class="dialog-body-info">
                <el-form ref="classForm" :model="classForm"  status-icon>
                    <el-form-item label="班级名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="classForm.name" autocomplete="off" clearable
                                  placeholder="请输入班级名称"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
              <el-button type="primary" @click="saveClass" >保存</el-button>
            </template>
        </el-dialog>
          <!--删除班级 对话框-->
        <el-dialog title="" v-model="toDeleteClass" top="18vh" width="33%" center :show-close="false">
            <div class="delete-header">
                <div class="header-icon">
                    <span class="icon-text">!</span>
                </div>
            </div>
            <div class="delete-tip">是否删除该班级？确定删除后将删除该班级的所有学生以及相关考试数据</div>
            <template #footer>
                <el-button type="primary" @click="deleteClass(curClassIndex)">确定删除</el-button>
                <el-button type="info" @click="toDeleteClass = false">取消</el-button>
            </template>
        </el-dialog>
          <!--退出学生 对话框-->
        <el-dialog title="" v-model="toDeleteStudent" top="18vh" width="33%" center :show-close="false">
            <div class="delete-header">
                <div class="header-icon">
                    <span class="icon-text">!</span>
                </div>
            </div>
            <div class="delete-tip">是否删除该学生？确定删除后将删除该班级学生</div>
            <template #footer>
                <el-button type="primary" @click="ChangeEClass(curStudentId)">确定删除</el-button>
                <el-button type="info" @click="toDeleteStudent = false">取消</el-button>
            </template>
        </el-dialog>

          <!--培训班详情-->
        <el-dialog title="查看考试班学生详情" v-model="toViewStudent" fullscreen :before-close="toViewStudentClose" >
                  <el-dialog
                        v-model="innerVisible"
                        title="添加学生"
                        fullscreen
                        append-to-body
                        :before-close="innerVisibleClose"
                    >
                    <!-- 添加学生表 -->
                      <div class="common-layout">
                        <el-container>
                          <el-aside width="35%" height="100vh">
                            <el-card>
                                <el-table
                                      :data="tclassDetail.slice((currentGPage - 1) * pageGSize, currentGPage * pageGSize)"
                                      border
                                      style="width: 100%;"
                                      >
                                  <el-table-column
                                          label="序号"
                                          width="60"
                                          align="center">
                                      <template #default="scope">
                                          {{scope.$index + 1}}
                                      </template>
                                  </el-table-column>
                                  <el-table-column
                                          prop="name"
                                          label="教学班名称"
                                          width="280"
                                          align="center">
                                      <template #default="scope">
                                              <span>{{scope.row.name}}</span>
                                      </template>
                                  </el-table-column>
                                  <el-table-column label="操作" width="250">
                                    <template #default="scope">
                                            <el-button
                                                    size="mini"
                                                    type="success"
                                                    @click="viewNClassByEClass((currentGPage - 1) * pageGSize + scope.$index)">添加班级
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="clearClass((currentGPage - 1) * pageGSize + scope.$index)">清空选择
                                            </el-button>
                                        </template>
                                  </el-table-column>
                              </el-table>
                              <Paginationz :currentPage="currentGPage" :pageSize="pageGSize" :total="tclassDetail.length"
                    :handleSizeChange="handleSizeChange4" :handleCurrentChange="handleCurrentChange4"></Paginationz>
                            </el-card>
                          </el-aside>
                          <el-main>
                          <!--已选中表格-->

                          <el-card>
                            <span>已选中学生</span>
                                <el-table
                                      :data="studentTDetail.slice((stuTCurPage - 1) * stuTPageSize, stuTCurPage * stuTPageSize)"
                                      border
                                      style="width: 100%"
                                      id="exportTable"
                                     >

                                  <el-table-column
                                          label="序号"
                                          width="100"
                                          align="center">
                                      <template #default="scope">
                                          {{scope.$index + 1}}
                                      </template>
                                  </el-table-column>
                                  <el-table-column
                                          label="班级名称"
                                          prop="className"
                                          width="220"
                                          align="center">
                                  </el-table-column>
                                  <el-table-column
                                          label="学号"
                                          prop="userId"
                                          width="220"
                                          align="center">
                                  </el-table-column>
                                  <el-table-column
                                          label="姓名"
                                          prop="realName"
                                          width="200"
                                          align="center">
                                  </el-table-column>
                                  <el-table-column label="操作..." width="220">
                                        <template #default="scope">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="DelOneStudent(scope.row)">移除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                              </el-table>
                          </el-card>


                              <!--分页-->
                              <Paginationz :currentPage="stuTCurPage" :pageSize="stuTPageSize"
                                          :total="stuTTotal" :handleSizeChange="handleSizeChange3"
                                          :handleCurrentChange="handleCurrentChange3"></Paginationz>
                              <el-row :span ="24">
                                <el-col :span ="18"></el-col>
                                <el-col :span="6">
                                  <el-button type="danger" class="filter-item item-margin-left-16" @click="ClearALLStudent">
                                    清空选中的学生
                                  </el-button>
                                </el-col>

                              </el-row>



                          </el-main>
                        </el-container>
                        </div>
                        <template #footer>
                          <el-button type="primary" class="filter-item item-margin-left-16" @click="Addstudentall">
                              <i class="el-icon-circle-close"></i> 确认添加
                          </el-button>
                        </template>
                    </el-dialog>
                  <el-dialog
                        v-model="innerVisible2"
                        width="30%"
                        title="导入学生"
                        append-to-body
                    >
                    <el-input
                        placeholder="请输入用户号"
                        v-model="Addstudent.id"
                        clearable
                        >
                </el-input>
                    </el-dialog>
            <!--过滤栏-->
            <div class="filter-bar">
                <el-input
                        placeholder="请输入名称搜索"
                        v-model="eidInput"
                        clearable
                        class="filter-item">
                </el-input>
                <el-button type="primary" class="filter-item" @click="searchStudentsById()">
                    <i class="el-icon-search "></i> 搜索
                </el-button>
                <el-button type="primary" class="filter-item item-margin-left-16"
                           @click="viewClass(curIndex), eidInput = ''">
                    <i class="el-icon-refresh"></i> 刷新
                </el-button>
                <el-button type="primary" class="filter-item item-margin-left-16" @click="toViewStudent = false">
                    <i class="el-icon-circle-close"></i> 关闭页面
                </el-button>
                <el-button type="primary" class="filter-item item-margin-left-16" @click="addExamstudent ">
                    <i class="el-icon-circle-close"></i> 添加学生
                </el-button>
            </div>

            <!--学生表格-->
            <el-table
                    :data="studentDetail"
                    border
                    style="width: 100%"
                    id="exportTable">
                <el-table-column
                        label="序号"
                        width="100"
                        align="center">
                    <template #default="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="学号"
                        prop="userId"
                        width="320"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="userName"
                        width="320"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        align="center">
                        <el-tag disable-transitions>正常</el-tag>
                </el-table-column>
                <el-table-column label="操作..." width="400">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteStudent(scope.row)">退出班级
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <Paginationz :currentPage="stuCurPage" :pageSize="stuPageSize"
                        :total="stuTotal"
                        :handleSizeChange="handleSizeChange2" :handleCurrentChange="handleCurrentChange2"></Paginationz>

        </el-dialog>
        <el-dialog title="修改考试班级名称" v-model="toChangeClassName">

        <el-input v-model="changeName" placeholder="请输入内容"></el-input>
          <template #footer>
            <el-button @click="toChangeClassName = false">取消</el-button>
            <el-button type="primary" @click="changeClassName(curClassIndex)">确认</el-button>
          </template>
        </el-dialog>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';
import API from "@/api/trainer/examClass"
import UserApi from "@/api/trainer/user"
import Pagination from "@/views/Pagination.vue";
import { viewDepthKey } from 'vue-router';
import Paginationz from "@/components/Pagination.vue"
import {toRaw} from 'vue'
import { ElMessage } from 'element-plus';
import { async } from '@kangc/v-md-editor';
import user from '@/api/trainer/user';
export default {

  // import 引入的组件需要注入到对象中才能使用
  props: {},
  components:{Pagination,Paginationz},
  data () {
    // 这里存放数据
    return {
      classTableOk: true,
      //分页信息
      pagination: {
              currentPage: 1, //初始页
              pageSize: 10, //每页的数据
              totalCount: 0 //总数据
         },
    // 创建班级弹窗
    toCreateClass : false,
    classForm: { // 班级表单
    name: ''
    },
    formLabelWidth: '120px',
    // 删除班级弹窗
    toDeleteClass : false,
    toDeleteStudent: false,
    // 查看班级弹窗
    currClass : -1,
    toViewStudent : false,
    studentDetail : [],
    stuCurPage : 1,
    stuPageSize : 20,
    stuTotal:0,
    AddstudentRule :{
      phone: [{required: true, message: '不可为空', trigger: 'blur'},
                ],
    },
    Addstudent :{
            way: '1',
            phone:''
    },
    //搜索
    eidInput : '',
    IsSearch : false,
    //查看班级的内部弹窗
    innerVisible : false,
    innerVisible2 : false,
    //修改班级弹窗
    toChangeClassName: false,
    changeName:'',
    // 班级表格请求
    params:{
    "condition": {
        "className": null
    },
    "paging": {
      totalCount: 100,
        pageIndex: 1,
        pageSize: 10,
        enableTotalCount: true
        },
    sorts: [],
    extras: {}
    },

      //  班级相关内容
      class:{
          id: 0,
          className: "",
          creatorId: 0,
          companyId: 0,
          createTime: "",
          modifyTime: "",
          disabled: false
    },
       classTable:[],
    curClassIndex: 0, //选中的班级
    //  班级排序信息
      sorts:[],
      sortParam:{
        // Ascending Descending
        mode: "Ascending",
        fields:[]
    },
    //  搜索其他信息
      condition:{
        className:""
      },
      extras:{
        key:"",
      },
    //现在选中的考试班级下标
    curIndex: 0,
    oldStudentNum :[],
    //用于添加学生的班级表
    innerVisible: false,
    currentGPage: 1,
    pageGSize : 20,
    tclassDetail:[],
    currTClass: 0,
    studentTDetail:[],
    stuTTotal: 0,
    stuTCurPage : 1,
    stuTPageSize: 20,
    //全选的班级
    selectClass:[],
    selectClassLenght:0,
    selectClassnum:[],
    studentADetail:[],
    curStudentId: 0,
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handlePageChange(pageSize,currentPage){
      this.pagination.pageSize=pageSize
      this.pagination.currentPage=currentPage
      this.params.paging.pageSize=pageSize
      this.params.paging.pageIndex=currentPage
      this.getClassTable()
    },
    freshClass(){
      this.$router.go(0)
    },
    async getUserInfo(param) {
      try {
        console.log(param)
        const res2 = await UserApi.getUserInfo(param);
        console.log(res2.data);
        if (res2.data.success == true) {
          if (res2.data.content.records.length == 0) {
            this.$message.error("请求创建人失败");
          } else {
            return res2.data.content.records[0].username;
          }
        }
      } catch (error) {
        console.log(error)
        this.$message.error("请求失败");
      }
    },

    async getClassTable() {
      this.classTableOk = true;
      console.log("this.params:", this.params);
      try {
        const res = await API.getAllExamClass(this.params);
        if (res.data.success == true) {
          this.pagination.totalCount = res.data.totalCount;
          const res1 = await API.getAllCompany();
          if (res1.data.success == true) {
            this.classTable = res.data.data;
            for (let i = 0; i < res.data.data.length; i++) {
              this.classTable[i].companyId = res1.data.content[res.data.data[i].companyId - 1].name;
              const param = res.data.data[i].creatorId;
              let username = await this.getUserInfo(param);
              this.classTable[i].creatorId = username
              // 从getUserInfo函数中获取到的username可以在这里使用
            }
          }

          this.$message.success("获取班级信息成功");
        } else {
          console.log(res.data);
          this.$message.error("获取班级信息失败，请联系管理员");
        }

        this.classTableOk = false;
      } catch (error) {
        console.log(error);
      }
    },

    // 初始化分页信息
    init(){
      let  paging1={
        totalCount: 0,
            pageIndex: 1,
            pageSize: 10,
            enableTotalCount: true
      }
      this.paging=paging1
    },
    searchClass(){
      this.init()
      this.searchClassTable()
    },

    // 搜索班级
    async searchClassTable(){

      let searchClassTableparams = {
            "condition": {
                "className":  this.condition.className.trim()
            },
            "paging": {
                "paging": this.paging1
            },
        }
      this.classTableOk = true;  
        try {
        const res = await API.getAllExamClass(searchClassTableparams);
        if (res.data.success == true) {
          this.pagination.totalCount = res.data.totalCount;
          const res1 = await API.getAllCompany();
          if (res1.data.success == true) {
            this.classTable = res.data.data;
            for (let i = 0; i < res.data.data.length; i++) {
              this.classTable[i].companyId = res1.data.content[res.data.data[i].companyId - 1].name;
              const param = res.data.data[i].creatorId;
              let username = await this.getUserInfo(param);
              this.classTable[i].creatorId = username
              // 从getUserInfo函数中获取到的username可以在这里使用
            }
          }

          this.$message.success("获取班级信息成功");
        } else {
          console.log(res.data);
          this.$message.error("获取班级信息失败，请联系管理员");
        }

        this.classTableOk = false;
      } catch (error) {
        console.log(error);
      }
    },
    //搜索学生
    searchStudentsById(){
      this.IsSearch = true
      this.viewClass(this.curIndex)
    },
    // 查看班级学生
    viewClass(index){
      // console.log(this.classTable[index].id)
      this.currClass  = this.classTable[index].id
      this.curIndex = index
      let getExamClassStudentparams ={
        "condition": {
          "classId": this.currClass
        },
        "paging": {
          "pageIndex": this.stuCurPage,
          "pageSize": this.stuPageSize,
          "enableTotalCount": true
        }
      }
      if(this.IsSearch == true){
        getExamClassStudentparams ={
        "condition": {
          "classId": this.currClass,
          "userName" : this.eidInput.trim()
        },
        "paging": {
          "pageIndex": this.stuCurPage,
          "pageSize": this.stuPageSize,
          "enableTotalCount": true
        }
      }
      }
      API.getExamClassStudent(getExamClassStudentparams).then(res=>{

        if(res.data.success==true){
          console.log(res.data)
          // 渲染表格
          this.studentDetail = res.data.data
          this.stuTotal = res.data.totalCount
          this.$message.success("获取班级学生信息成功")
          this.toViewStudent= true
        }else {
          console.log(res.data)
          this.$message.error("获取班级学生信息失败，请联系管理员")
        }

      }).catch(e=>{
                console.log(e)
                })
    },
    //检测到关闭
    toViewStudentClose(){
      this.eidInput = ''
      this.toViewStudent = false;
    },
    // 保存班级
    saveClass() {
          var currentDate = new Date();

          // 获取当前时间的各个部分
          var year = currentDate.getFullYear(); // 年份
          var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 月份（注意要加1，且补0）
          var day = ('0' + currentDate.getDate()).slice(-2); // 日期（补0）
          var hours = ('0' + currentDate.getHours()).slice(-2); // 小时（补0）
          var minutes = ('0' + currentDate.getMinutes()).slice(-2); // 分钟（补0）
          var seconds = ('0' + currentDate.getSeconds()).slice(-2); // 秒（补0）

          // 拼接成所需格式的字符串
          var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
          // 要传给后台的信息
          let CreateClassParams = {
            "id": null,
            "className": this.classForm.name,
            "creatorId": 0,
            "createTime": formattedDate,
            "modifyTime": formattedDate,
            "disabled": false
          }
          if(this.classForm.name.indexOf(' ') !== -1) {
            ElMessage.error("班级名不能包含空格");
            this.classForm.name = '';
            return;
          }
          console.log(CreateClassParams)
          API.createExamClass(CreateClassParams).then(res=>{
            console.log(res.data)
            if(res.data.success==true){
              this.getClassTable()
              this.$message.success("创建班级信息成功")
            }else {
              console.log(res.data)
              this.$message.error("创建班级失败，请联系管理员")
            }
            this.classForm.name = '';
            this.toCreateClass = false;
            
          }).catch(e=>{
                console.log(e)
                })
    },
    // 禁用班级
    deleteClass(index) {
    let delIndex = this.classTable[index].id//获得的班级id
    //调用删除接口
    let deleteClassParams ={
      "id": delIndex,
      "className": this.classTable[index].className,
      "disabled": true
    }
    API.changeExamClass(deleteClassParams).then(res=>{
    if(res.data.success==true){
    console.log(res.data)
    this.$message.success("删除班级成功")
    this.getClassTable()
    }else {
    console.log(res.data)
    this.$message.error("删除班级失败，请联系管理员")
    }
    }).catch(e=>{
                console.log(e)
                })
    this.toDeleteClass = false;
  },
  //修改班级名称
  changeCurClass(index){
    this.toChangeClassName = true
    this.curClassIndex = index;
    this.changeName = this.classTable[this.curClassIndex].className
  },
  changeClassName(index){
    let delIndex = this.classTable[index].id//获得的班级id
    //调用删除接口
    let changeClassNameParams ={
      "id": delIndex,
      "className": this.changeName,
      "disabled": false

    }
    API.changeExamClass(changeClassNameParams).then(res=>{
    if(res.data.success==true){
    console.log(res.data)
    this.$message.success("删除班级成功")
    this.getClassTable()
    }else {
    console.log(res.data)
    this.$message.error("删除班级失败，请联系管理员")
    }
    }).catch(e=>{
                console.log(e)
                })
    this.toChangeClassName = false;
  },    



    preDelClass(index) {
    this.curClassIndex = index;
    console.log(index)
    this.toDeleteClass = true;
    },
    //翻页考试学生表
    handleCurrentChange2(val) {
      this.stuCurPage = val;
      this.viewClass(this.curIndex)
    },
    handleSizeChange2(val){
      this.stuPageSize = val;
      this.viewClass(this.curIndex)
    },
    // 获取所有培训班级
    getTrainClass(){
        API.getAllTrainClass().then(res=>{
        if(res.data.success==true){
        console.log(res.data)
        this.$message.success("请求所有班级成功")
        this.tclassDetail = res.data.content
        }else {
        console.log(res.data)
        this.$message.error("请求班级失败，请联系管理员")
        }
        // this.classTable=res.data
    }).catch(e=>{
                console.log(e)
                })
    },
    addExamstudent(){
      this.getTrainClass()
      this.innerVisible = true
    },
    //查看培训班级的学生
    viewNClassByEClass(index){
    console.log(this.tclassDetail[index].id)
    this.currTClass = this.tclassDetail[index].id//现在的班级号
    let getOneTrainClassParams = {
            "trainClassId": this.currTClass
        }
    API.getOneTrainClass(getOneTrainClassParams).then(res=>{
        if(res.data.success==true){
        console.log(res.data)
        for(let i = 0;i<res.data.content.length;i++){
          res.data.content[i].className = this.tclassDetail[index].name
        }
        this.studentTDetail = [...this.studentTDetail,...res.data.content]
        this.stuTTotal = this.studentTDetail.length
        this.stuTCurPage = 1
        this.combineStudent()
        this.$message.success("添加班级成功")
        }else {
        console.log(res.data)
        this.$message.error("添加班级失败，请联系管理员")
        }
        }).catch(e=>{
                console.log(e)
                })
        },
    clearClass(row){
      let delId = row.id
      let detail = this.studentTDetail
      this.studentTDetail = detail.filter(function(detail){
        return detail.classId != delId
      })
      this.stuTTotal =this.studentTDetail.length
    },
    // 合并相同学号
    combineStudent(){
      let objects = this.studentTDetail
      let uniqueIds = Array.from(new Set(objects.map(obj => obj.userId)));
      console.log(uniqueIds)
      let result = objects.filter( (obj) =>{
        if(uniqueIds.includes(obj.userId))
        { let indexToRemove = uniqueIds.indexOf(obj.userId);
          uniqueIds.splice(indexToRemove,1)
          return true
        }
        return uniqueIds.includes(obj.userId)
      } );
      this.studentTDetail = result
      this.stuTTotal = this.studentTDetail.length
    },
    //删除所有学生的选中
    ClearALLStudent(){
      this.studentTDetail = []
      this.stuTCurPage = 1
      this.stuTTotal = 0
    },
    innerVisibleClose(){
      this.studentTDetail = []
      this.stuTCurPage = 1
      this.stuTTotal = 0
      this.innerVisible = false;
    },
    //删除一个学生的选中
    DelOneStudent(row){
      let objects = this.studentTDetail
      let result = objects.filter( (obj) =>{
        return obj.userId != row.userId
      } );
      this.studentTDetail = result
      this.stuTTotal = this.studentTDetail.length
    },
    //跳页
    handleSizeChange3(val){
      this.stuTPageSize = val
    },
    handleCurrentChange3(val){
      this.stuTCurPage = val
    },
    handleSizeChange4(val){
      this.pageGSize = val
    },
    handleCurrentChange4(val){
      this.currentGPage = val
    },
    //添加学生去后台
    Addstudentall(){
      //先合并
      this.combineStudent()
      //为零不允许添加
      if(this.studentTDetail.length==0){
        ElMessage.error('请添加学生再提交')
        return
      }
      //老班级的学生id
      for(let i = 0;i< this.studentDetail.length;i++){
        this.oldStudentNum[i] = +this.studentDetail[i].userId
        }
      console.log("oldStudentNum",this.oldStudentNum)
      //新添加的
      for(let i = 0; i<this.studentTDetail.length;i++){
        this.selectClassnum[i] = +this.studentTDetail[i].userId
      }
      // 将两个数组合并
      let result = this.selectClassnum.filter(item => !this.oldStudentNum.includes(item));
      let addExamStudnetParams = {
            "classId": this.currClass,
            "userIds": result
      }
      console.log(addExamStudnetParams)
      API.addExamStudnet(addExamStudnetParams).then(res=>{

        if(res.data.success==true){
        console.log(res.data)
        this.$message.success("添加学生成功")
        this.innerVisible = false
        this.selectClassnum = []
        this.studentTDetail = []
        this.viewClass(this.curIndex)
        this.oldStudentNum = []
        }else {
        console.log(res.data)
        this.$message.error("添加学生失败，请联系管理员11111111")
        }
        }).catch(e=>{
                console.log(e)
                })
    },
    //学生退出班级
    deleteStudent(row){
      this.toDeleteStudent = true;
      this.curStudentId = row.userId
      console.log(this.curStudentId)
    },
    ChangeEClass(num){
      let userIdNum = [num]
      let delExamStudentParams = {
            "classId": this.currClass,
            "userIds": userIdNum
      }
      console.log(delExamStudentParams)
      API.delExamStudent(delExamStudentParams).then(res=>{

        if(res.data.success==true){
        console.log(res.data)
        this.$message.success("删除学生成功")
        //重新请求
        this.viewClass(this.curIndex)
        }else {
        console.log(res.data)
        this.$message.error("删除学生失败，请联系管理员")
        }
        }).catch(e=>{
                console.log(e)
                })
        this.toDeleteStudent = false;
    }



  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  setup () {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {
    this.getClassTable()
    console.log(1111)
  },
  onBeforeMount () {
  }, // 生命周期 - 挂载之前
  onBeforeUpdate () {
  }, // 生命周期 - 更新之前
  onUpdated () {
  }, // 生命周期 - 更新之后
  onBeforeUnmount () {
  }, // 生命周期 - 销毁之前
  onUnmounted () {
  }, // 生命周期 - 销毁完成
  onErrorCaptured () {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped>

@import "../styles/table-row.css";
@import "../styles/del-confirm.css";


input[type=file] {
  display: none !important;
}

.class {
  width: 100%;
}

.filter-container {
  padding-bottom: 10px;
}

.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}

.item-input {
  width: 200px;
  margin-right: 5px;
}

.filter-item:nth-child(3), .filter-item:nth-child(4) {
  margin-left: 16px;
}

.class-list {
  width: 100%;
}

.el-dialog .el-form-item {
  font-weight: 600;
}

.dialog-body-info .upload-box {
  width: 94.5%;
  height: 120px;
  margin-left: 5%;
  margin-bottom: 20px;
  font-weight: 100;
  border: 2px #bbb dashed;
  border-radius: 8px;
  display: flex;
  align-items: center;

}

.dialog-body-info .upload-content {
  margin: 0 auto;
}

.dialog-body-info .upload-content .file-upload {
  display: inline-block;
  margin-left: 1rem;
}

.dialog-body-info .upload-content span {
  font-size: 1.5rem;
  color: darkgrey;
}

.upload-tip a {
  text-decoration: none;
  color: #409EFF;
}

.upload-tip {
  margin-top: 10px;
}

.dialog-body-table .el-table {
  margin-top: 20px;
}

.dialog-body-save h3 span {
  color: green;
}

.dialog-body-save h3 a {
  text-decoration: none;
  color: inherit;
}

.class-list .col2-cell-style, .upload-tip span {
  color: #409EFF;
  cursor: pointer;
}

</style>
